import { Router, Route, Switch} from "react-router-dom";
import {createBrowserHistory} from 'history';
import React, { Suspense, lazy } from 'react';
//引入需要用到的页面组件
// import Game from '../pages/Game';
import Home from '../pages/Home';
import Nav from '../components/layout/Header'
import LeftBar from '../components/layout/LeftBar.tsx';
import Breadcrumb from '../components/layout/Breadcrumb.tsx';
import slowImport from '../plugins/slowImport';
import 'antd/dist/antd.css';
import '../asset/css/base.scss';
import { Layout } from 'antd';
import { childRoutes } from "./route_conf";

const { Header, Content } = Layout;

const customHistory = createBrowserHistory();
const Game = lazy(() => slowImport(import('../pages/Game'), 1000));
//引入一些模块
export default class router extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        routeName: 'home'
      }
    }
    render() {
      return (
        <Router history={customHistory}>
          <Layout>
            <Header className="header">
              <div className="logo" />
              <Nav history={customHistory} onChangeMenu={(routeName)=> this.ChangeMenu(routeName)} />
            </Header>
            <Layout>
              <Switch>
                <LeftBar history={customHistory} routeName={this.state.routeName} />
              </Switch>
              <Layout style={{ padding: '0 24px 24px' }}>
                <Breadcrumb />
                <Content
                  className="site-layout-background"
                  style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                  }}
                >
                  <Suspense fallback={<h3>加载中，请稍候...</h3>}>
                    <Switch>
                      <Route exact path={'/'} routeName={'home'} component={Home}></Route>
                      {this.renderHomeChild('home')}
                      <Route exact path={'/game'} routeName={'game'} component={Game}></Route>
                      {this.renderHomeChild('game')}
                    </Switch>
                  </Suspense>
                </Content>
              </Layout>
            </Layout>
          </Layout>
        </Router>
      )
    }
    ChangeMenu(routeName) {
      this.setState({
        routeName
      });
      customHistory.push(`/${routeName}`);
    }
    renderHomeChild(module){
      let children = childRoutes[module];
      return (children.map(item => {
        return (<Route exact path={item.path} component={item.component}></Route>)
      }))
    }
}

